<script setup lang="ts">
// import { Container, Draggable } from 'vue3-smooth-dnd'
definePage({
  // beforeEnter(to) {
  //   console.log(to)
  //   return '404'
  // },
})
// const items = ref<any>([
//   { id: 1, data: 'Princess Mononoke' },
//   { id: 2, data: 'Spirited Away' },
//   { id: 3, data: 'My Neighbor Totoro' },
//   { id: 4, data: 'Howl\'s Moving Castle' },
// ])

// function onDrop(dropResult: any) {
//   items.value = applyDrag(items.value, dropResult)
// }

// function applyDrag(arr: any, dragResult: any) {
//   const { removedIndex, addedIndex, payload } = dragResult

//   if (removedIndex === null && addedIndex === null)
//     return arr
//   const result = [...arr]
//   let itemToAdd = payload

//   if (removedIndex !== null)
//     itemToAdd = result.splice(removedIndex, 1)[0]

//   if (addedIndex !== null)
//     result.splice(addedIndex, 0, itemToAdd)

//   return result
// }
</script>

<template>
  <!-- <Container drag-handle-selector=".column-drag-handle" @drop="onDrop">
    <Draggable v-for="item in items" :key="item.id">
      <div class="draggable-item">
        <span class="column-drag-handle" style="float:left; padding:0 10px;">&#x2630;</span>
        {{ item.data }}
      </div>
    </Draggable>
  </Container> -->
  <p>123</p>
</template>

<route lang="yaml">
meta:
  layout: another
  name: '测试'
</route>
